<template>
  <div class="task-details">
    <van-nav-bar title="任务详情" left-arrow @click-left="router.back()" />
    <TaskDetails :item="state.item" />

    <div class="task-detail-footer">
      <van-action-bar-icon
        :class="state.status === 1 ? 'active' : ''"
        icon="star-o"
        text="收藏"
        @click="setTaskCollection"
      />
      <van-button type="primary" block @click="gotoMessage">立即沟通</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import TaskDetails from './components/TaskDetails/index.vue';
import { taskDetails, taskCollection } from '@/api/task';

const router = useRouter();

const state = reactive({
  loading: false,
  item: '',
  status: null,
});

// 获取详情数据
const taskId = router.currentRoute.value.params.id;
const getTaskDetail = async () => {
  state.loading = true;
  const res: any = await taskDetails({ task_id: taskId });
  if (res) {
    state.item = res.records[0];
    state.status = res.records[0].status;
    state.loading = false;
  } else {
    showToast(res.msg);
    state.loading = false;
  }
};
getTaskDetail();

const setTaskCollection = async () => {
  state.loading = true;
  const res: any = await taskCollection({ task_id: taskId });
  if (res) {
    state.status = res.data.status;
  }
  state.loading = false;
  showToast(res.msg);
};
const gotoMessage = () => {
  router.push('/message/talk/' + state.item.task_id + '/' + state.item.user_id);
};
</script>

<style lang="scss" scoped>
.task-detail-footer {
  display: flex;
  position: fixed;
  left: 0;
  width: 100%;
  align-items: center;
  background: #ffffff;
  bottom: 0;
  padding: 0.64rem 0;
  button {
    margin-right: 0.64rem;
  }
  .active::v-deep .van-icon-star-o:before {
    color: #fe8f27;
  }
}
</style>
